<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="./resources/css/reset.css" type="text/css" media="all"/>
        <link rel="stylesheet" href="./resources/css/layout.css" type="text/css" media="all"/>
        <link rel="stylesheet" href="./resources/css/style.css" type="text/css" media="all"/>
        <!--        <script type="text/javascript" src="./resources/js/jquery-1.6.js" ></script>-->
        <script type="text/javascript" src="./resources/js/cufon-yui.js"></script>
        <script type="text/javascript" src="./resources/js/cufon-replace.js"></script>
        <script type="text/javascript" src="./resources/js/Didact_Gothic_400.font.js"></script>
        <script type="text/javascript" src="./resources/js/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript" src="./resources/js/atooltip.jquery.js"></script>
        <script type="text/javascript" src="./resources/js/jquery.jqtransform.js" ></script>
        <script type="text/javascript" src="./resources/js/script.js"></script>
        <script type="text/javascript" src="./resources/js/jquery.easing.1.3.js"></script>

        <title id="title">
            <ui:insert name="title">
            </ui:insert>
        </title>
    </h:head>

    <h:body>

        <div class="body1">
            <div class="main">
                <!-- header -->
                <header>
                    <h1><a href="index.html" id="logo"></a></h1>
                    <div align="right" >
                        <!--                        <ul id="icons">
                                                    <li><a href="#" class="normaltip" title="Facebook"><img src="./../resources/images/icon1.jpg" alt="./../loginDialog.jsf"/></a></li>
                                                    <li><a href="#" class="normaltip" title="Twitter"><img src="./../resources/images/icon2.jpg" alt=""/></a></li>
                                                    <li><a href="#" class="normaltip" title="Linkedin"><img src="./../resources/images/icon3.jpg" alt=""/></a></li>
                                                </ul>-->
                        <c:if test="#{empty loginBean.username}">
                            <h:outputLink id="loginLink" value="javascript:void(0)" onclick="dlg.show()" title="login">     
                                <p:graphicImage value="./resources/images/Users-icon.png" />  
                            </h:outputLink>
                        </c:if>

                        <c:if test="#{!empty loginBean.username}">
                            Welcome,#{loginBean.username}<br/>
                            <h:form>
                                <p:commandLink id="logout" ajax="false" actionListener="#{loginBean.doLogout}">
                                    <h:outputText value="Log out" /><br/>
                                </p:commandLink>
                                <p:commandLink id="goManagement" ajax="false" actionListener="#{loginBean.goManagementPage}">
                                    <h:outputText value="Go to management page" /><br/>
                                </p:commandLink>
                            </h:form>
                        </c:if>

                        <p:growl id="growl" showDetail="true" life="3000" />  

                        <p:dialog id="dialog" header="Login" widgetVar="dlg">  
                            <h:form>  
                                <h:panelGrid columns="2" cellpadding="5">  
                                    <h:outputLabel for="username" value="Username:" />  
                                    <p:inputText value="#{loginBean.username}"   
                                                 id="username" required="true" label="username" />  

                                    <h:outputLabel for="password" value="Password:" />  

                                    <p:password value="#{loginBean.password}" id="password" required="true" label="password"/>
                                    <f:facet name="footer">  
                                        <p:commandButton id="loginButton" value="Login" update=":growl"   
                                                         actionListener="#{loginBean.doLogin()}"   
                                                         oncomplete="handleLoginRequest(xhr, status, args)"/>
                                        <h:outputLink value="./register.jsf">
                                            <h:outputText value="Register"/>
                                        </h:outputLink>
                                    </f:facet>  
                                </h:panelGrid>  
                            </h:form>  
                        </p:dialog>

                        <script type="text/javascript">  
                            function handleLoginRequest(xhr, status, args) {  
                                if(args.validationFailed || !args.loggedIn) {  
                                    jQuery('#dialog').effect("shake", { times:3 }, 100);  
                                } else {  
                                    dlg.hide();  
                                    jQuery('#loginLink').fadeOut();  
                                }  
                            }  
                        </script> 
                    </div>
                    <nav>
                        <ul id="menu">
                            <li id="menu_active"><a href="index.jsf">Main Page</a></li>
                            <li><a href="sellingEstateList.jsf">Selling Estate</a></li>
                            <li><a href="rentingEstateList.jsf">Renting Estate</a></li>
                            <li><a href="Contact.jsf">Contact Us</a></li>
                            <li class="end"><a href="AboutUs.jsf">About Us</a></li>
                        </ul>
                    </nav>
                    <div class="ic">More Information about My Sweet Home</div>
                </header>
                <!-- / header --> 
            </div>
        </div>
        <!-- content -->
        <div id="body2" class="body2">   
            <div class="main">
                <section id="content">
                    <div class="wrapper">
                        <article id="col1" class="col1">
                            <ui:insert name="col1">
                            </ui:insert>
                        </article>
                        <article id="col2" class="col2">
                            <h:form id="form_1" >
                                <div class="pad1">
                                    <h3>Find Your Property</h3>
                                    <div class="row_select">
                                        <div class="cols">
                                            Type of estate:<br/>
                                            <h:selectOneMenu id="txtTypeOfEstate" value="#{EstateMBean.typeOfEstateID}">  
                                                <f:selectItem itemLabel="--Select type--" itemValue="" />  
                                                <f:selectItems value="#{EstateMBean.typeOfEstateList}" var="typeOfEstate" itemLabel="#{typeOfEstate.typeOfEstateName}" itemValue="#{typeOfEstate.typeOfEstateID}"/>  
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="cols pad_left1">
                                            Category:<br/>
                                            <h:selectOneMenu value="#{EstateMBean.categoryID}">
                                                <f:selectItem itemLabel="--Select category--" itemValue="" />  
                                                <f:selectItems value="#{EstateMBean.categoryList}" var="category" itemLabel="#{category.categoryName}" itemValue="#{category.categoryID}"/>
                                            </h:selectOneMenu>
                                        </div>
                                    </div>
                                    <div class="row_select">
                                        <div class="cols">
                                            City:<br/>
                                            <h:selectOneMenu value="#{EstateMBean.cityID}">
                                                <f:selectItem itemLabel="--Select city--" itemValue="" /> 
                                                <f:selectItems value="#{EstateMBean.cityList}" var="city" itemLabel="#{city.cityName}" itemValue="#{city.cityID}"/>
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="cols pad_left1">
                                            District:<br/>
                                            <h:selectOneMenu value="#{EstateMBean.districtID}">
                                                <f:selectItem itemLabel="--Select district--" itemValue="" /> 
                                                <f:selectItems value="#{EstateMBean.districtList}" var="district" itemLabel="#{district.districtName}" itemValue="#{district.districtID}"/>
                                            </h:selectOneMenu>
                                        </div>
                                    </div>

                                    <div class="row_select">
                                        Search Area:<br/>
                                        <h:selectOneMenu value="#{EstateMBean.rangeArea}">  
                                            <f:selectItem itemLabel="--Select Area --" />  
                                            <f:selectItem itemLabel="From 50=>100m" itemValue="1"/>  
                                            <f:selectItem itemLabel="From 100=>200m" itemValue="2"/>  
                                            <f:selectItem itemLabel="Greater than 200m" itemValue="3"/>  
                                        </h:selectOneMenu>
                                    </div>
                                    <div class="row_select">

                                        Price Range:<br/>
                                        <h:selectOneMenu value="#{EstateMBean.rangePrice}">  
                                            <f:selectItem itemLabel="--Select Price --" />  
                                            <f:selectItem itemLabel="From 10000$=>30000$" itemValue="1"/>  
                                            <f:selectItem itemLabel="From 30000$=>50000$" itemValue="2"/>  
                                            <f:selectItem itemLabel="Greater than 50000$" itemValue="3"/>  
                                        </h:selectOneMenu>


                                    </div>
                                    <div class="row_select">
                                        <div class="cols">
                                            Room(s):<br/>
                                            <h:selectOneMenu id="txtnoOfRoom" value="#{EstateMBean.noRoom}">  
                                                <f:selectItem itemLabel="--Select--" itemValue="" />  
                                                <f:selectItem itemLabel="1" itemValue="1"/>  
                                                <f:selectItem itemLabel="2" itemValue="2"/>  
                                                <f:selectItem itemLabel="3" itemValue="3"/>  
                                                <f:selectItem itemLabel="4" itemValue="4"/>  
                                                <f:selectItem itemLabel="5" itemValue="5"/>  
                                                <f:selectItem itemLabel="6" itemValue="6"/>  
                                                <f:selectItem itemLabel="7" itemValue="7"/>  
                                                <f:selectItem itemLabel="8" itemValue="8"/>  
                                                <f:selectItem itemLabel="9" itemValue="9"/>  
                                                <f:selectItem itemLabel="10" itemValue="10"/>
                                                <f:selectItem itemLabel="11" itemValue="11"/>  
                                                <f:selectItem itemLabel="12" itemValue="12"/>  
                                                <f:selectItem itemLabel="13" itemValue="13"/>  
                                                <f:selectItem itemLabel="14" itemValue="14"/>  
                                                <f:selectItem itemLabel="15" itemValue="15"/>  
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="cols pad_left1">
                                            Floor(s):<br/>
                                            <h:selectOneMenu id="txtnoOfFloor" value="#{EstateMBean.noFloor}">  
                                                <f:selectItem itemLabel="--Select--" itemValue="" />  
                                                <f:selectItem itemLabel="1" itemValue="1"/>  
                                                <f:selectItem itemLabel="2" itemValue="2"/>  
                                                <f:selectItem itemLabel="3" itemValue="3"/>  
                                                <f:selectItem itemLabel="4" itemValue="4"/>  
                                                <f:selectItem itemLabel="5" itemValue="5"/>  
                                                <f:selectItem itemLabel="6" itemValue="6"/>  
                                                <f:selectItem itemLabel="7" itemValue="7"/>  
                                                <f:selectItem itemLabel="8" itemValue="8"/>  
                                                <f:selectItem itemLabel="9" itemValue="9"/>  
                                                <f:selectItem itemLabel="10" itemValue="10"/>
                                                <f:selectItem itemLabel="11" itemValue="11"/>  
                                                <f:selectItem itemLabel="12" itemValue="12"/>  
                                                <f:selectItem itemLabel="13" itemValue="13"/>  
                                                <f:selectItem itemLabel="14" itemValue="14"/>  
                                                <f:selectItem itemLabel="15" itemValue="15"/>  
                                            </h:selectOneMenu>
                                        </div>
                                    </div>
                                    <div class="row_select pad_bot1">
                                        <div class="cols">
                                            <h:commandButton class="button" value="Proposals" action="#{EstateMBean.searchAdvance()}"/>
                                            
                                        </div>
                                    </div>

                                </div>
                            </h:form>
                        </article>
                    </div>
                    <div class="wrapper">
                        <article id="col1_2" class="col1">
                            <ui:insert name="col1_2">
                            </ui:insert>
                        </article>
                        <article id="col2_2" class="col2">
                            <ui:insert name="col2_2">
                            </ui:insert>
                        </article>
                    </div>
                </section>
            </div>
        </div>
        <div id="body3" class="body3">
            <ui:insert name="body3">
            </ui:insert>
        </div>
        <!-- / content -->
        <div id="body4" class="body4">
            <div class="main">
                <!-- footer -->
                <footer>
                    <span class="call">Call Center: <span>1-800-567-8934</span></span>
                    <p><b>ACE-Danang1 - eProject SEM 4 - Group 3<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Huy - Long - Tan - Vinh - Trung<br/>
                            Website: <a href="http://www.softech.vn/">http://www.softech.vn</a> 
                        </b></p>
                    <!-- {%FOOTER_LINK} -->
                </footer>
                <!-- / footer -->
            </div>
        </div>
    </h:body>

</html>
